<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button
          type="primary"
          size="medium"
          icon="el-icon-plus"
          @click="$emit('changeIndex', 1)"
          :disabled="!category3id"
          v-has="'btn.Spu.add'"
          >添加spu</el-button
        >
      </div>
      <el-table :data="pageList" v-loading="loading" border stripe>
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
        <el-table-column label="SPU描述" prop="description"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="addSkuinfo(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="reWrite(row)"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="el-icon-warning"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="tableInfo.page"
        :page-sizes="[3, 5, 7, 10]"
        :page-size.sync="tableInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getspuPageList } from "@/api/spu";
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableInfo: {
        page: 1,
        limit: 3
      },
      totalNum: 0,
      pageList: [],
      loading: false
    };
  },
  computed: {
    ...mapState("category", ["category3id"])
  },
  methods: {
    async reqspuPageList() {
      this.loading = true;
      const { page, limit } = this.tableInfo;
      let re = await getspuPageList(page, limit, this.category3id);
      this.totalNum = re.total;
      this.pageList = re.records;
      this.loading = false;
    },
    // 传值覆写spuinfo
    reWrite(row) {
      // console.log(row);
      //通过中间的spulist传值
      this.$emit("changeIndex", 1, row);
    },
    addSkuinfo(row) {
      this.$emit("changeIndex", 2, row);
    }
  },
  watch: {
    tableInfo: {
      deep: true,
      handler() {
        this.reqspuPageList();
      }
    },
    category3id() {
      this.reqspuPageList();
    }
  },
  mounted() {
    // 初始载入时如果有category3id值就发送请求获取数据
    if (this.category3id) {
      this.reqspuPageList();
    }
  }
};
</script>

<style></style>
